<!DOCTYPE html>
<html lang="en">
<%- include('../_head.ejs') %>
<%- include('../_style.ejs') %>
<%- include('../_nav.ejs') %>
<body>
  <div class="container">
    <h1 class="mb-4 text-white">Blog Articles</h1>
    <% if(login){%>
    <a href="/articles/new" class="btn btn-success">New Article</a>
    <%}%>
    <% articles.forEach(article => { %>
      <div class="card mt-4">
        <div class="card-body" style="cursor: pointer" onclick="window.location.href='articles/<%= article.id %>'">
          <h4 class="card-title"><%= article.title %></h4>
          <div class="card-subtitle">
            <%= article.createdAt.toLocaleDateString() %>
          </div>
          <div class="card-text mb-2"><%= article.description %>&nbsp; Author:<%= article.authorName%></div>
          <%if(login&&login_email===article.author){%>
          <a href="articles/edit/<%= article.id %>" class="btn btn-info">Edit</a>
          <form action="/articles/<%= article.id %>?_method=DELETE" method="POST" class="d-inline">
            <button type="submit" class="btn btn-danger">Delete</button>
          </form>
          <%}%>
        </div>
      </div>
    <% }) %>
  </div>
    <%- include('../_footer.ejs') %>
</body>
</html>